<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 140px;
            background-color: skyblue;
        }
        .ziti {
            font-weight: 600;
        }
    </style>
</head>

<body>
    <h3>word-break</h3>
    <i class="ziti">1.word-break: normal 使用浏览器默认的换行规则。</i>
    <div class="box">
        <p style="word-break: normal;">请您用下面的按钮选择这段文字的word-break属性的值。看一看会发生什么，然后您就会明白这个属性的意义。Enjoy my works . many
            thanks .</p>
    </div>
    <i class="ziti">2.word-break: break-all 允许在单词内换行。</i>
    <div class="box">
        <p style="word-break: break-all;">请您用下面的按钮选择这段文字的word-break属性的值。看一看会发生什么，然后您就会明白这个属性的意义。Enjoy my works . many
            thanks .</p>
    </div>
    <i class="ziti">3.word-break: keep-all 只能在半角空格或连字符处换行。。</i>
    <div class="box">
        <p style="word-break: keep-all;">请您用下面的按钮选择这段文字的word-break属性的值。看一看会发生什么，然后您就会明白这个属性的意义。Enjoy my works . many
            thanks .</p>
    </div>
</body>

</html>